<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">

    document.addEventListener('plusready', function(){
        //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
    });

</script>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
    }
    div{
        box-sizing: border-box;
        font: 30px '微软雅黑';
    }
    #main{
        height: 100%;
    }
    #run{
        height: 10%;
        border: 1px black;
    }
    #result{
        height: 10%;
        text-align: right;
    }
    .c6{
        width: 50%;
        height:16%;
        float: left;
        border: 1px solid #f2d9b6;
        text-align: center;
        line-height: 100px;
        background-color: #ffe39d;
    }
    .c3{
        float: left;
        width: 25%;
        height: 16%;
        border: 1px solid #ffe6c2;
        text-align: center;
        line-height: 100px;
        background-color: #ffe39d;
    }
    .bt{
        background-color: orange;
    }
</style>
<body id="canvas">
<div id="main">
    <div id="run"></div>
    <div id="result"></div>
    <div class="c3" onclick="clickC()">C</div>
    <div class="c3" onclick="back()">Back</div>
    <div class="c3" onclick="show('%');isDecimal()">%</div>
    <div class="c3 bt" onclick="show('/')">÷</div>
    <div class="c3" onclick="show(7)">7</div>
    <div class="c3" onclick="show(8)">8</div>
    <div class="c3" onclick="show(9)">9</div>
    <div class="c3 bt" onclick="show('*')">*</div>
    <div class="c3" onclick="show(4)">4</div>
    <div class="c3" onclick="show(5)">5</div>
    <div class="c3" onclick="show(6)">6</div>
    <div class="c3 bt" onclick="show('+')">+</div>
    <div class="c3" onclick="show(1)">1</div>
    <div class="c3" onclick="show(2)">2</div>
    <div class="c3" onclick="show(3)">3</div>
    <div class="c3 bt" onclick="show('-')">-</div>
    <div class="c6" onclick="show(0)">0</div>
    <div class="c3" onclick="show('.')">.</div>
    <div class="c3 bt" onclick="operate()">=</div>
</div>

</body>
<script>
    /*获取显示器部分*/
    var run = document.getElementById('run');
    var result = document.getElementById('result');
    /*清除功能*/
    function clickC() {
        run.innerHTML = '';
        result.innerHTML = '';
    }

    /*退格*/
    function back(){
        if(result.innerHTML!='')
        {
            result.innerHTML = '';
            run.innerHTML = '';
        }
        else {run.innerHTML = run.innerHTML.slice(0,run.innerHTML.length-1);}
    }
    //  功能键+/-
    function play() {
        run.innerHTML = -1*run.innerHTML;
    }

    //数字键值输入功能
    function show(num) {
        run.innerHTML = run.innerHTML + num;
    }

    //运算结果功能
    function operate() {
            result.innerHTML = "= "+eval(run.innerHTML).toFixed(5);
    }

</script>

</html>